<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .seprate{
            width: 500px;
            line-height: 48px;
            position: relative;
            top: 30px;
            left: 40px;
        }
        ul{
            width: 100px;
            line-height: 48px;
            padding: 0px 10px;
            border-right: #666666 1px solid;
            float: left;
        }
        main{
            width: 500px;
            height: 300px;
            position: absolute;
            top: 78px;
            left: 40px;
            background-color: #bbffaa;
            overflow: hidden;
        }
        div{
            width: 500px;
            height: 300px;
            float: left;
            display: none;
        }
        .div2{
            width: 500px;
            height: 300px;
            background: #008CFF;
            color: #cc0000;
            /*float: left;*/
            display: block;
        }
        ul:hover{
            /*border-top-color: red;*/
            display: block;
            background-color:red;
        }
    </style>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        $(function (){
           $('.seprate>ul').mouseenter(function (){
              $(this).addClass('hover').siblings('ul').removeClass('hover');
              let idx=$(this).index();
              $('main>div').eq(idx).addClass('div2').siblings('div').removeClass('div2');
           });
        });
    </script>
</head>
<body>
<header class="seprate">
    <ul>国际大牌</ul>
    <ul>国妆名牌</ul>
    <ul>清洁用品</ul>
    <ul>男士用品</ul>
</header>
<main>
    <div id="international">国际大牌</div>
    <div id="madeInChina">国妆名牌</div>
    <div id="clear">清洁用品</div>
    <div id="man">男士精品</div>
</main>
</body>
</html>